<template>
  <el-card
    shadow="hover"
    class="mini-card"
    :style="{
      background: `linear-gradient(50deg, ${colorFrom}, ${colorTo})`,
    }"
  >
    <div slot="header">{{ header }}</div>
    <div class="num">{{ num }}</div>
    <div class="tip">{{ tip }}</div>
    <svg-icon v-if="icon" :name="icon" />
  </el-card>
</template>

<script>
export default {
  name: "ColorfulCard",
  props: {
    colorFrom: {
      type: String,
      default: "#843cf6",
    },
    colorTo: {
      type: String,
      default: "#759bff",
    },
    header: {
      type: String,
      default: "",
    },
    num: {
      type: Number,
      default: 0,
    },
    tip: {
      type: String,
      default: "",
    },
    icon: {
      type: String,
      default: "",
    },
  },
};
</script>

<style lang="scss" scoped>
.mini-card {
  position: relative;
  color: #fff;
  text-shadow: 0 0 2px #000;

  :deep(.el-card__header) {
    position: relative;
    z-index: 1;
    font-size: 18px;
    border-bottom: 0;
  }

  :deep(.el-card__body) {
    padding-top: 0;
  }

  .num {
    position: relative;
    z-index: 1;
    font-size: 36px;
  }

  .tip {
    margin-top: 10px;
    font-size: 14px;
    color: #eee;
  }

  .svg-icon {
    position: absolute;
    top: -10px;
    right: -30px;
    font-size: 120px;
    transform: rotate(15deg);
  }
}
</style>
